import './index.less';

const CIRCLE_R = 20;
const CIRCLE_CENTER_X = 40;
const CIRCLE_CENTER_Y = 40;
const ANGLE_CONST = (2 * Math.PI) / 360;
const ANGLE_STRAIT = (90 * Math.PI) / 2;

function twCircle(vol) {
  const twContent = document.getElementById('tw-content');
  const twCircle = document.getElementById('tw-circle');
  twContent.innerText = `${vol}%`;
  // 弧长公式
  let oncircle = 2 * Math.PI * CIRCLE_R * ((vol * 3.6) / 360);
  // 利用svg circle的 stroke-dasharray属性（虚线）实现加载效果
  // 第一个数字为虚线长度
  twCircle.setAttribute('stroke-dasharray', `${oncircle},1000`);
}

var vol = 0;
setInterval(() => {
  if (vol >= 100) vol = 0;
  vol++;
  twCircle(vol);
}, 200);

function paCircle(vol) {
  const paContent = document.getElementById('pa-content');
  const paCircle = document.getElementById('pa-circle');
  const pa100Circle = document.getElementById('pa-100');

  paContent.innerText = `${vol}%`;
  if (vol === 100) {
    pa100Circle.style.display = 'block';
  } else {
    pa100Circle.style.display = 'none';
    // x = 圆心x + cos(弧度 / 半径 = 圆心角) * 半径
    // y = 圆心y + sin(弧度 / 半径 = 圆心角) * 半径
    // 在这里， vol * 3.6 求出百分比所占 弧度的角度
    //
    // 但是，在显示器上，坐标系统不太一样，经过总结，
    // 发现下面的计算才是真实正确的
    let angle = ANGLE_CONST * vol * 3.6;

    const x = CIRCLE_CENTER_X + Math.sin(angle) * CIRCLE_R;
    const y = CIRCLE_CENTER_Y - Math.cos(angle) * CIRCLE_R;

    let d = 'M40 20 A20 20,0,';
    if (vol > 50) {
      paCircle.setAttribute('d', `${d}1,1,${x} ${y}`);
    } else {
      paCircle.setAttribute('d', `${d}0,1,${x} ${y}`);
    }
  }
}

// paCircle(100);
var vol2 = 0;
setInterval(() => {
  if (vol2 >= 100) vol2 = 0;
  vol2++;
  paCircle(vol2);
}, 200);

const POLYWIDTH = 250;
const POLYHEIGHT = 80;
const lineData = [10, 24, 30, 1, 1, 1, 1, 12, 4, 5, 45, 36, 89, 1, 1, 1];

function polyline() {
  const perWidth = POLYWIDTH / lineData.length;
  const polyline = document.getElementById('polyline-default');
  const points = lineData.reduce(
    (prev, current, idx) =>
      `${prev} ${idx * perWidth},${current * (POLYHEIGHT / 100)}`,
    ''
  );
  polyline.setAttribute('points', points);
}
polyline();

const colors = [
  ['#b92b27', '30%'],
  ['#1565cd', '90%'],
];
const colors2 = [
  ['#fdbb2d', '10%'],
  ['#b21f1f', '50%'],
  ['#1a2a6c', '90%'],
];

function format(color, offset) {
  return `<stop offset="${offset}" stop-color="${color}" />`;
}

function polyline2() {
  const perWidth = POLYWIDTH / lineData.length;
  const polyline = document.getElementById('polyline-linear');
  const points = lineData.reduce(
    (prev, current, idx) =>
      `${prev} ${idx * perWidth},${current * (POLYHEIGHT / 100)}`,
    ''
  );
  polyline.setAttribute('points', points);
}
polyline2();
let skincode = 1;
skin(skincode);

function skin(skin) {
  const polyline2Gradient = document.getElementById('polyline-gradient');
  let color;
  switch (skin) {
    case 1:
      color = colors;
      break;
    case 2:
      color = colors2;
      break;
    default:
      color = colors;
      break;
  }
  const gradient = color.reduce(
    (prev, item) => `${prev} ${format(...item)}`,
    ''
  );
  console.log(gradient);
  polyline2Gradient.innerHTML = gradient;
}

setInterval(() => {
  skincode = skincode === 1 ? 2 : 1;
  skin(skincode);
}, 500);
